<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>变量、函数、数组方法、Json、字符串</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <script>
        // 1.变量赋值
        // if (1 < 2) {
        //     var a = 1;
        // }
        // alert(a);
        // let [a,b,c] = [1,2,3];
        // console.log(a, b, c);
        // json格式对应也行
        // let { a, b, c } = { a: 1, b: 2, c: 3 }//{ a1: 1, b1: 2, c1: 3 };
        // console.log(a, b, c);
        // let [x, { a, b, c }, y] = [4, { a: 1, b: 2, c: 3 }, 5];
        // console.log(a, b, c, x, y); // 1 2 3 4 5
        // 这种就不行，格式得对应（左边3，右边5个 ==> over）
        // let [x, { a, b, c }, y] = { a: 1, b: 2, c: 3, x: 4, y: 5 };
        // console.log(a, b, c, x, y); // 未捕获的TypeError：{...}不可迭代
        // let [a, b, c];
        // [a, b, c] = [1, 2, 3];
        // // 未捕获的SyntaxError：在解构声明中缺少初始化程序
        // console.log(a, b, c);
        // -----------------------------------------------
        // -----------------------------------------------
        // 2.函数
        // 2.1.箭头函数
        // function add(x, y) {
        //     return x + y;
        // }

        // let add1 = function (x, y) {
        //     return x + y;
        // }

        // let add2 = (x, y) => {
        //     return x + y;
        // }
        // let add3 = (x, y) => x + y;
        // console.log(add(1, 2)) // 3
        // console.log(add1(1, 2)) // 3
        // console.log(add2(1, 2)) // 3
        // console.log(add3(1, 2)) // 3
        // window.onload=()=>{
        //     alert("么么哒")
        // }
        // 便捷说明（`和Net用起来基本上一样`）
        // 如果只有一个参数：`()`可以省略
        // let get_age = age => {
        //     return age - 2;
        // }
        // console.log(get_age(18))
        // 如果函数体只有一句话：`{}`可以省略
        // 如果只有一句return，那么return也可以省略
        // let get_age = age => age - 2;
        // console.log(get_age(18))
        // let print_age = age => console.log(age - 2);
        // print_age(18); //16
        // -----------------------------------------------
        // 2.2.默认参数
        // 原来：
        // function show(a, b, c) {
        //     c = c || 7; // 默认参数
        //     console.log(a, b, c)
        // }
        // 现在：
        // function show(a, b, c = 7) {
        //     console.log(a, b, c)
        // }
        // show(1, 2)
        // show(1, 2, 3)
        // -----------------------------------------------
        // 2.3.参数展开（剩余参数|数组参数）
        // let show_args = (a, b, ...args) => console.log(a, b, args);
        // // `...args`是个数组（Python是元组）
        // show_args(1, 2, 3, 4, 5, 6)// 1 2 [3, 4, 5, 6] 
        // let show_args = (a, b, ...args, c) => console.log(a, b, args, c);
        // // Uncaught SyntaxError: Rest parameter must be last formal parameter
        // show_args(1, 2, 4, 5, 6, c = 3) // ...args必须是最后一个参数
        // -----------------------------------------------
        // 扩展用法：
        // let nums = [1, 2, 3, 4]
        // let nums2 = [0, ...nums, 5, 6]
        // console.log(nums2) // [0,1,2,3,4,5,6]
        // -----------------------------------------------
        // let nums = [1, 2, 3, 4]
        // let nums2 = [0, 5, 6]
        // nums.push(...nums2)
        // // [1, 2, 3, 4, 0, 5, 6]
        // console.log(nums)
        // -----------------------------------------------
        // 2.4.this
        // function show() {
        //     alert(this); // 1,2,3,4
        //     console.log(this); // [1, 2, 3, 4, show: ƒ]
        // }
        // let arr = [1, 2, 3, 4];
        // arr.show = show;
        // arr.show();
        // -----------------------------------------------
        // let arr = [1, 2, 3, 4];
        // arr.show = () => {
        //     console.log(this); // Window
        // }
        // arr.show();
        // -----------------------------------------------
        // document.onclick = function () {
        //     let arr = [1, 2, 3, 4];
        //     arr.show = () => {
        //         console.log(this); // document
        //     }
        //     arr.show();
        // }
        // -----------------------------------------------
        // -----------------------------------------------
        // 3.数组
        // scor_arr = [100, 28, 38, 64]
        // // let results = scor_arr.map(function (item) {
        // //     return item >= 60;
        // // });
        // // 简写：
        // let results = scor_arr.map(item => item >= 60);
        // // [true, false, false, true]
        // console.log(results); // 不改变scor_arr内容，生成新数组
        // console.log(scor_arr);
        // -----------------------------------------------
        // nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // nums2 = nums.filter(item => item % 2 == 0);
        // // [2, 4, 6, 8, 10]
        // console.log(nums2)
        // -----------------------------------------------
        // forEach
        // nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // nums.forEach(item => {
        //     item += 1;
        // });

        // // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        // console.log(nums); //不会改变nums，仅仅是遍历
        // -----------------------------------------------
        // nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // let sum = 0;
        // let temp =nums.forEach(item => {
        //     sum += item;
        // });
        // console.log(sum) // 55
        // console.log(temp) // 验证了：forEach 没有返回值
        // -----------------------------------------------
        // nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // // x是第一个元素，y是第二个元素
        // nums.reduce((x, y, index) => {
        //     console.log(x, y, index);
        // });
        // 1 2 1
        // undefined 3 2
        // undefined 4 3
        // undefined 5 4
        // undefined 6 5
        // undefined 7 6
        // undefined 8 7
        // undefined 9 8
        // undefined 10 9
        // -----------------------------------------------
        // nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // result = nums.reduce((x, y) => x + y);
        // console.log(result / nums.length) // 5.5
        // -----------------------------------------------
        // nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // let result = nums.reduce((temp, item, index) => {
        //     temp += item;
        //     if (index < nums.length - 1) {
        //         return temp;
        //     } else { // 最后一次，返回平均值即可
        //         return temp / nums.length;
        //     }
        // });
        // console.log(result) // 5.5
        // -----------------------------------------------
        // window.onload = () => {
        //     let collection = document.getElementsByTagName("div");
        //     Array.from(collection).forEach(item => item.style.background = "blue");
        // }
        // -----------------------------------------------
        // -----------------------------------------------
        // 4.Json系
        // let [a, b] = [1, 2];
        // json = { a, b, c: 3 };
        // console.log(json); // {a: 1, b: 2, c: 3}

        // // old：json = { a: a, b: b, c: 3 };
        // -----------------------------------------------
        // json = {
        //     a: 1,
        //     b: 2,
        //     show: function () {
        //         console.log(this.a, this.b)
        //     }
        // };
        // json.show();
        // -----------------------------------------------
        // json = {
        //     a: 1,
        //     b: 2,
        //     show() {
        //         console.log(this.a, this.b);
        //     }
        // };
        // json.show();
        // -----------------------------------------------
        // -----------------------------------------------
        // 5.字符串
        // let [name,age]=["小明",23];
        // // 我叫小明,我今年23
        // console.log(`我叫${name},我今年${age}`);
        // -----------------------------------------------
        //         console.log(`我叫：
        // 小明
        // 今年：
        // 23`);
        // -----------------------------------------------
        // let url = "https://www.baidu.com";
        // if (url.startsWith("http://") || url.startsWith("https://")) {
        //     console.log("B/S");
        // } if (url.endsWith(".com")) {
        //     console.log(".com")
        // }
        // -----------------------------------------------
    </script>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            margin-right: 1px;
            float: left;
        }
    </style>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>